<template>
	<div>

		<scroll class="songlist" ref="songlist" :data="data">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell" v-for='(i,index) in data' @click="played(0,i.name)">
					{{index+1}}.{{i.name}}

					<i class="Hui-iconfont Hui-iconfont-star-o" @click.stop="addlist(index,i.name)" ref='coleindex'></i>

				</li>

			</ul>
		</scroll>

	</div>
</template>

<script>
	import Scroll from './scroll'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			data: {
				type: Array,
				default:[],
			},

		},

		computed: {
			...mapGetters([
				'searchlist',
				'collect'
			]),
		},
		methods: {
			addlist(index, i) {
				var _this = this
				this.$http.get('/search' + "?keywords=" + i).then((res) => {
					let datas = res.data.result
					_this.$store.dispatch('searchlist', datas)
					let thissong = this.searchlist.songs[0]
					_this.$store.dispatch("getcollect", [thissong, 0])
				})
			},
			played(index, content) {
				let _this = this
				this.$http.get('/search' + "?keywords=" + content).then((res) => {

					var datas = res.data.result
					_this.$store.dispatch('searchlist', datas)
					var thissong = this.searchlist.songs[index]
					console.log(thissong)
					_this.$store.dispatch('dataurl', thissong)
					_this.$store.dispatch('isplaying')
				})

			},

		},
		components: {
			Scroll
		}

	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.bg-image {
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 70%;
		transform-origin: top;
		background-size: cover;
		filter: blur(5px);
	}
	
	.mui-row {
		position: absolute;
		top: 12vh;
		.mui-col-xs-5 {
			text-align: center;
		}
		.mui-col-xs-7 {
			h1 {
				display: block;
				font-size: 18px;
				color: #fff;
				font-weight: normal;
				margin-bottom: 5vh;
			}
			p {
				display: block;
				color: #fff;
			}
		}
	}
	
	.songlist {
		position: fixed;
		height: 62vh;
		width: 100%;
		overflow: hidden;
		.mui-table-view {
			background-color: rgba(255, 255, 255, 0.3)!important;
			li {
				color: #fff;
				z-index: 88887;
				i {
					float: right;
				}
			}
		}
	}
</style>